//告警配置详情
.alarm-config-detail {
	.el-select {
		width: 100%;
	}
}
.page-alarm-list {
	.el-tabs__header {
		padding: 15px;
		margin-bottom: 0;
		background: #ffffff;
	}
}
.alarm-config-page {
	.card.table {
		.el-table {
			.no-data {
				max-width: 95% !important;
				padding-right: 0;
				padding-left: 0;
				margin: 0 !important;
			}
		}
	}
}

//告警配置卡片样式
.config-card {
	position: relative;
	height: 230px;
	color: #555555;
	.title {
		padding: 8px 20px;
		border-bottom: 1px solid #e8e8e8;
		.master-title {
			font-size: 16px;
			font-weight: bold;
		}
		.sub-title {
			font-size: 15px;
			color: #555555;
		}
	}
	.body {
		box-sizing: border-box;
		display: inline-table;
		width: 100%;
		height: 120px;
		padding: 10px 30px;
		.el-scrollbar__view {
			position: relative;
			min-height: 100%;
		}
		.panel {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}
		.alarm-group {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 25px;
			.type-label {
				font-weight: bold;
				color: orangered;
			}
			.param-info {
				display: flex;
				.param-label {
					color: #777777;
					text-align: right;
				}
				.param-value {
					min-width: 60px;
					padding-right: 10px;
					text-align: right;
				}
			}
		}
	}
	.footer {
		display: flex;
		background: #ffffff;
		border-top: 1px solid #e8e8e8;
		.el-button {
			flex: 1;
			height: 45px;
			font-size: 13px;
		}
	}
	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding: 0;
	}
	.bg {
		position: absolute;
		z-index: 0;
		width: 100%;
		height: 100%;
		background-image: url("@/assets/images/cube/access-config-diaabled.png");
		background-position: cover;
		background-size: 100% 100%;
		opacity: 0.4;
	}
}

//告警类型气泡提示（鼠标放在告警类型的扩展数据）
.alarm-type-popover {
	.label {
		width: 80px;
		text-align: right;
	}
	.text {
		margin-left: 15px;
	}
}
.monitor-head {
	.el-radio {
		justify-content: center;
		width: 88px;
		height: 40px;
		margin-right: 16px;
		font-size: 14px;
		font-weight: 400;
	}
	.el-radio__input {
		display: none;
	}
	.el-radio.is-bordered {
		background-color: #ffffff;
		border-style: none;
	}
	.el-radio.is-bordered.is-checked {
		background-color: var(--el-color-primary);
	}
	.el-radio__input.is-checked + .el-radio__label {
		color: #ffffff;
	}
	.el-tabs__header {
		padding: 15px;
		margin-bottom: 0;
		background: #ffffff;
	}
}
.card-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 40px;
}
.card-bg {
	background: #f6f8fc;
	border-radius: 12px;
	box-shadow: 0 2px 4px #8d91a50a;
}

//告警监控
.alarm-monitor-tabs {
	.today-nok,
	.yesterday-nok {
		background-image: url("@/assets/images/cube/access-config-diaabled.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}
	.today-ok,
	.yesterday-ok {
		background-image: url("@/assets/images/cube/access-config-enabled.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}
	.el-tabs__header {
		margin-bottom: 0;
		.el-tabs__item {
			font-size: 16px;
		}
	}
	.left-icon {
		margin-left: 30px;
	}
	.tips-label {
		padding-right: 30px;
		color: #777777;
	}
	.data-value-num {
		padding-right: 30px;
		font-size: 28px;
	}
	.level-item {
		border: 1px solid #cccccc;
		.tips-label {
			color: #ffffff;
		}
		.data-value-num {
			color: #ffffff;
		}
	}
	.level-1 {
		background: linear-gradient(to right, #fdce58e3, #ff0000);
		border-left: 5px solid red;
	}
	.level-2 {
		background: linear-gradient(to right, #fdc830, #f37335);
		border-left: 5px solid orangered;
	}
	.level-3 {
		background: linear-gradient(to right, #00f260, #0575e6);
		border-left: 5px solid #065cb3;
	}
	.level-4 {
		background: linear-gradient(to right, #dce35b, #03af48);
		border-left: 5px solid green;
	}
}
.top-level,
.trend-page {
	.el-card__body {
		height: calc(100% - 77px);
		.level-block {
			display: block;
			width: 40px;
			margin: auto;
		}
		.level-1 {
			color: #ffffff;
			background: #a01515;
		}
		.level-2 {
			color: #ffffff;
			background: rgb(228 23 23);
		}
		.level-3 {
			color: #ffffff;
			background: rgb(224 82 16);
		}
		.level-4 {
			color: #ffffff;
			background: rgb(207 190 34);
		}
		.level-5 {
			color: #ffffff;
			background: rgb(141 182 30);
		}
	}
}
